<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCAKE蛋糕-网上订购生日蛋糕</title>
    <link rel="stylesheet" href="./css/rester.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <script src="./swiper/swiper-bundle.min.js"></script>
    <link rel="icon" href="http://rhfgn51hx.hn-bkt.clouddn.com/v2-609f59fac9e2a93007e522868276f199_720w.jpg">
</head>

<body>
    <!-- 动画图 -->
    <div class="demo"><img src="http://rhfgn51hx.hn-bkt.clouddn.com/0c16c6e0-45eb-477b-9b70-128f61b93582.gif" alt="">
        <!-- 动画图 -->

    </div>
    <!-- 头部 -->
    <header>
        <div class="top">
            <div class="center">
                <!-- logo插入区域 -->
                <div class="log">
                    <img src="./images/shouye.image/logo.png" alt="">
                </div>
                <!-- 导航栏 -->
                <ul id="one">
                    <li><a href="javascript:;">上海市</a></li>
                    <li><a href="javascript:;">所有产品</a></li>
                    <li><a href="javascript:;">首页</a></li>
                    <li><a href="dangao.html">蛋糕</a></li>
                    <li><a href="javascript:;">面包</a></li>
                    <li><a href="javascript:;">小食</a></li>
                    <li><a href="javascript:;">最新活动</a></li>
                </ul>
                <ul id="two">
                    <li><a href="#" id="huanying"><span id="zhuce">注册</span>&nbsp;|&nbsp;<span id="denglu">登录</span></a>
                    </li>
                    <li>
                        <img src="./images/shouye.image/购物01.png" alt="" id="shopping">
                    </li>
                    <li>
                        <img src="./images/shouye.image/购物02.png" alt="" style="width: 30px;height:20px;">
                    </li>
                </ul>
            </div>
        </div>

    </header>

    <!-- 内容 -->
    <main>
        <!-- 遮罩层 -->
        <div class="zhezhao" id="zhezhaoceng" style="display: none;"></div>

        <!-- 广告图 -- 轮播图区域 -->
        <div class="banner">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <!-- <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div> -->

                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>

        <!-- 注册 -->
        <div class="denglu" id="yinceng">
            <div class="denglu-top-zhuce">
                <h1>账号注册</h1>
                <span id="show"></span>
            </div>
            <div class="denglu-inputs">
                <div class="inputs">
                    <input type="text" placeholder="用户名" name="username" id="txt"><br>
                    <input type="password" placeholder="输入密码 （ 8~20位字符 ）" name="userpass" id="pass"><br>
                    <input type="text" placeholder="确认密码"><br>
                    <input type="text" placeholder="图片验证码"><br>
                    <input type="text" placeholder="手机验证码">
                    <img src="./images/zhuce.image/tupian.jpg" alt=""
                        style="position: absolute;top: 155px;right:30px;width: 134px;height: 41px;">
                    <img src="./images/zhuce.image/shouji.jpg" alt=""
                        style="position: absolute;top: 207px;right:30px;width: 134px;height: 41px;">
                    <div class="login">
                        <span><a href="javescript:;">已有账号，立即登录</a></span>
                    </div>
                    <div class="mcake-shopping">
                        <!-- 圆球 -->
                        <div class="mcake-shopping-left" id="guanbizhuce"></div>
                        <h1>同意 《 MCAKE购物协议》</h1>
                    </div>
                </div>
                <div class="lijizhuce">
                    <span><a href="#" id="button">立即注册</a></span>
                </div>
            </div>
        </div>

        <!-- 登录  -->
        <div class="zhuce" id="yinceng2">
            <div class="zhuce-noe1">
                <div class="zhuce-noe1-noe">
                    <img src="./images/denglu.image/denglu1.png" alt="">
                </div>
                <div class="zhuce-noe1-two">
                    <a href="javescript:;">未登录</a>
                </div>


                <div class="zhuce-noe2">
                    <a href="javescript:;">账号密码登录</a>
                    <a href="javescript:;">手机验证码登录</a>
                </div>

                <div class="inp">
                    <input type="text" placeholder="请输入用户名" name="username" id="tt"><br>
                    <input type="password" placeholder="请输入密码" name="userpass" id="ps"><br>
                </div>

                <div class="wangjimima">
                    <a href="javescript:;">忘记密码</a>
                </div>

                <div class="zhifubao">
                    <div class="pp">
                        <div class="pp-noe1">
                            <p>使用合作网站账号登录</p>
                        </div>
                        <div class="pp-noe2">
                            <img src="./images/denglu.image/denglu2.png" alt="" id="zhifubao">
                            <img src="./images/denglu.image/denglu3.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="dengluqilai">
                    <a href="#" id="buttonn">立即登录</a>
                </div>
            </div>
        </div>

        <!-- 首页的死数据 -->
        <div class="center">
            <!-- 推荐区域 可复制 -->
            <div class="main-benjituijian">
                <div class="main-benjituijian-1">
                    <div class="main-benjituijian-1-img">
                        <img src="./images/shouye.image/1.png" alt="">
                    </div>
                    <div class="main-benjituijian-1-2">
                        <h1>本季<span>推荐</span></h1>
                        <p>Seasonal Recommend</p>
                    </div>
                </div>
                <div class="main-benjituijian-1">
                    <h3>Seasonal</h3>
                </div>
                <div class="main-benjituijian-1">

                </div>
            </div>
            <div class="main-yixiegonggao">
                <div class="main-yixiegonggao-1">
                    <a href="javescript:;"> <img src="./images/shouye.image/2.jpg" alt="" title="芋见香甜"></a>
                </div>
                <div class="main-yixiegonggao-2">
                    <a href="javescript:;"><img src="./images/shouye.image/3.jpg" alt="" title="柠檬"></a>
                </div>
                <div class="main-yixiegonggao-3">
                    <a href="javescript:;"> <img src="./images/shouye.image/4.jpg" alt="" title="瑞克塔厚爱"></a>
                </div>
            </div>
            <!-- 法式经典区域 可复制 -->
            <div class="main-benjituijian">
                <div class="main-benjituijian-1">
                    <div class="main-benjituijian-1-img">
                        <img src="./images/shouye.image/1.png" alt="">
                    </div>
                    <div class="main-benjituijian-1-2">
                        <h1>法式<span>经典</span></h1>
                        <p>French Classics</p>
                    </div>
                </div>
                <div class="main-benjituijian-1">
                    <h3>French</h3>
                </div>
                <div class="main-benjituijian-1">
                    <a href="javescript:;">
                        <img src="./images/shouye.image/12.png" alt="">
                    </a>
                </div>
            </div>

            <div class="m">
                <a href="javescript:;"><img src="./images/shouye.image/m.jpg" alt="" title="经典香草拿破仑"></a>
            </div>

            <!-- 商品区域（死数据） -->
            <div class="shopping" style="margin-top: 10px;">
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>蓝莓轻乳拿破仑</h1>
                                <p>Napoleon aux myrtilles</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/5.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥198.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>黑森里拿破仑</h1>
                                <p>La Foret noir</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/6.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥198.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>蔓越莓红丝绒</h1>
                                <p>Velour rouge</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/7.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥198.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 商品区域（死数据） -->
            <div class="shopping" style="margin-top: 15PX;">
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>法香奶油可丽</h1>
                                <p>Gateau de crepes</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/8.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥198.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>卡法香缇</h1>
                                <p>Genoise cafe</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/9.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥198.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>榛果摩卡布拉吉</h1>
                                <p>Moka praline noisette</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/10.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥198.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 节日庆典区域 可复制 -->
            <div class="main-benjituijian">
                <div class="main-benjituijian-1">
                    <div class="main-benjituijian-1-img">
                        <img src="./images/shouye.image/1.png" alt="">
                    </div>
                    <div class="main-benjituijian-1-2">
                        <h1>节日<span>庆典</span></h1>
                        <p>Festival celebration</p>
                    </div>
                </div>
                <div class="main-benjituijian-1">
                    <h3>Festival</h3>
                </div>
                <div class="main-benjituijian-1">
                    <a href="javescript:;">
                        <img src="./images/shouye.image/12.png" alt="">
                    </a>
                </div>
            </div>
            <div class="m">
                <a href="javescript:;"><img src="./images/shouye.image/11.jpg" alt="" title="经典香草拿破仑"></a>
            </div>

            <!-- 商品区域（死数据） -->
            <div class="shopping" style="margin-top: 10px;">
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>花漾年华</h1>
                                <p>Floraison</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/13.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥298.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>歌剧院</h1>
                                <p>Opera</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/14.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥218.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>男友力</h1>
                                <p>Charmes masculins</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/15.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥198.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="shopping" style="margin-top: 10px;">
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>甜甜莓莓</h1>
                                <p>Gateau aux fraises et chmainat</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/16.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥218.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>爱丽丝花境</h1>
                                <p>Jardin d'Alice</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/17.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥298.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>鲜莓印雪</h1>
                                <p>Fraise-Chantilly</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/18.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥198.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 节日庆典区域 可复制 -->
            <div class="main-benjituijian">
                <div class="main-benjituijian-1">
                    <div class="main-benjituijian-1-img">
                        <img src="./images/shouye.image/1.png" alt="">
                    </div>
                    <div class="main-benjituijian-1-2">
                        <h1>儿童<span>系列</span></h1>
                        <p>Children Series</p>
                    </div>
                </div>
                <div class="main-benjituijian-1">
                    <h3>Children</h3>
                </div>
                <div class="main-benjituijian-1">
                    <a href="javescript:;">
                        <img src="./images/shouye.image/12.png" alt="">
                    </a>
                </div>
            </div>
            <div class="m">
                <a href="javescript:;"><img src="./images/shouye.image/19.jpg" alt="" title="经典香草拿破仑"></a>
            </div>

            <!-- 商品区域（死数据） -->
            <div class="shopping" style="margin-top: 10px;">
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>尼诺</h1>
                                <p>Nino</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/20.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥298.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>沙布蕾芭菲</h1>
                                <p>Sable parfait</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/21.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥198.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1> 安逸兔</h1>
                                <p>lapin detendu</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/22.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥218.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="shopping" style="margin-top: 10px;margin-bottom: 10px;">
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>

                                <h1> 半熟芝士（原味）</h1>
                                <p>fromage semi-fermente original</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/23.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥48.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1>可可雪球</h1>
                                <p>Boule de neige au cacao</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/24.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥48.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shopping-1">
                    <div class="shopping-1-nei">
                        <ul>
                            <li>
                                <h1> Finn的蘑菇星球</h1>
                                <p>La planete champignon de Finn</p>
                            </li>
                            <li>
                                <a href="javescript:;">
                                    <img src="./images/shouye.image/25.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <span>￥298.00</span>
                                <span><a href="javescript:;"><img src="./images/shouye.image/nb.png" alt=""></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部 -->
    <footer>
        <div class="center2">
            <div class="footer-top">

                <div class="footer-top-noe1">
                    <div class="footer-top-noe1-top">
                        <img src="./images/shouye.image/logo2.png" alt="">
                    </div>
                    <div class="footer-top-noe1-bottom">
                        <p>订购热线:4006678678(8:00-2000)</p>
                        <p>客服邮箱:cs@mcake.com</p>
                        <p>地址:上海市普邹陀区同普路1130弄3号楼</p>
                        <p>食品生产许可证:S℃12431010700121</p>
                    </div>

                </div>

                <div class="footer-top-noe2">
                    <div class="ul1">
                        <ul>
                            <li><a href="javascript:;" id="n1">关于我们</a></li>
                            <li><a href="javascript:;">企业介绍</a></li>
                            <li><a href="javascript:;">媒体合作</a></li>
                            <li><a href="javascript:;">招贤纳士</a></li>
                            <li><a href="javascript:;">呼叫中心</a></li>
                        </ul>
                    </div>
                    <div class="ul2">
                        <ul>
                            <li><a href="javascript:;" id="n1">帮助中心</a></li>
                            <li><a href="javascript:;">投诉与建议</a></li>
                            <li><a href="javascript:;">会员权益</a></li>
                            <li><a href="javascript:;">购物指南</a></li>
                            <li><a href="javascript:;">支付类</a></li>
                            <li><a href="javascript:;">订单相关</a></li>
                            <li><a href="javascript:;">配送服务</a></li>
                        </ul>
                    </div>
                    <div class="ul3">
                        <ul>
                            <li><a href="javascript:;" id="n1">发现</a></li>
                            <li><a href="javascript:;">公告</a></li>
                        </ul>
                    </div>
                </div>

                <div class="footer-top-noe3">
                    <div class="niubi">
                        <img src="./images/shouye.image/weibo.png" alt="">
                        <img src="./images/shouye.image/weixin.png" alt="">
                    </div>
                </div>
            </div>

            <div class="footer-bottom">
                <div class="footer-bottom-neihe">
                    <div class="footer-bottom-neihe1">
                        <div class="footer-bottom-neihe1-nb">
                            <p>上海卡法电子商务有限公司</p>
                            <p>地址:上海市普邹陀区同普路1130弄3号楼</p>
                            <p>洽谈电话:021-52691591</p>
                            <p>社会信用代码:913101070678091460</p>
                            <p>食品经营许可证:JY13101070034251</p>
                        </div>
                    </div>
                    <div class="footer-bottom-neihe2">
                        <div class="footer-bottom-neihe1-nb">
                            <p>上海卡法电子商务有限公司北京分公司</p>
                            <p>地止:北京市朝那阳区望京西路甲50号1号楼</p>
                            <p>洽谈电话:010-64720188 </p>
                            <p>社会信用代码:911101053484280752 </p>
                            <p>食品经营许可证:JY11105262932938 </p>
                        </div>
                    </div>
                    <div class="footer-bottom-neihe3">
                        <div class="footer-bottom-neihe1-nb">
                            <p>上海卡法电子商务有限公司杭分公司</p>
                            <p>地址:杭州市拱墅区朝晖路179号嘉汇大厦2号楼25-1室</p>
                            <p>洽谈电话:0571-28103688</p>
                            <p>社会信用代码:913301060920344424</p>
                            <p>食品经营许可证:JY13301050141226</p>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="nbtz">
            <h4>Copyright©2012-2022上海卡法电子商务有限公司版权所有1沪CP备12022075号1沪公网安备31010702005582号</h4>
        </div>
    </footer>
</body>

</html>

<script src="./js/fengzhuang.js"></script>
<script src="./js/jquery.min.js"></script>

<!-- 渲染轮播图 -->
<script>
    jQuery(function ($) {
        $.get("http://localhost/MCAKE/php/bannerGet.php", function (res) {
            let arr = JSON.parse(res);
            console.log(arr);
            // console.log(arr instanceof Array);
            console.log(arr[0]);
            console.log(arr[1]);
            let str = "";
            for (let i = 0; i < arr.length; i++) {
                str +=
                    `<div class="swiper-slide"><img src="${arr[0].img}" alt=""></div>
                            <div class="swiper-slide"><img src="${arr[1].img}" alt=""></div>
                                  <div class="swiper-slide"><img src="${arr[0].img}" alt=""></div>
                                        <div class="swiper-slide"><img src="${arr[1].img}" alt=""></div>`
                $(".swiper-wrapper").html(str);
            }
        })
    })
</script>

<!-- 轮播图 -->
<script>
    var swiper = new Swiper(".mySwiper", {
        cssMode: true,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        pagination: {
            el: ".swiper-pagination",
        },
        mousewheel: true,
        keyboard: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true //修改swiper的父元素时，自动初始化swiper
    });
</script>

<!-- 注册 -->
<script>
    function $(selector) {
        return document.querySelector(selector)
    }
    // 验证是否可用
    let flag = false;
    $('#txt').onblur = function () {
        let xhr = new XMLHttpRequest();
        xhr.open('get', 'http://localhost/MCAKE/php/checkUser.php?username=' + this.value);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                if (this.responseText.trim() == '1') {
                    $('span').innerHTML = '√';
                    $('span').style.color = 'green';
                    flag = true;
                } else {
                    $('span').innerHTML = 'X';
                    $('span').style.color = 'red';
                    zhezhao.style.display = 'none'
                }
            }
        }
    }
    // 将可用的用户名放入数据库
    $('#button').onclick = function () {
        if (flag) {
            let xhr = new XMLHttpRequest();
            xhr.open('post', `http://localhost/MCAKE/php/addUser.php`);
            //设置请求头
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            //post请求需要把请求参数写在 send 中，但是不能带“ ”
            xhr.send("username=" + $('#txt').value + "&userpass=" + $('#pass').value);
            //响应
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    alert('注册成功')
                    $('span').innerHTML = 'OK!'
                    $('#yinceng').style.display = 'none'
                    zhezhao.style.display = 'none'
                }
            }
        } else {
            alert('注册失败');
        }
    }
</script>

<!-- 登录 -->
<script>
    function $(select) {
        return document.querySelector(select)
    }
    $('#buttonn').onclick = function () {
        ajaxtool({
            type: 'post',
            url: "http://localhost/MCAKE/php/login.php",
            data: "username=" + $('#tt').value + "&userpass=" + $('#ps').value,
            success: function (data) {
                console.log(data);
                if (data.trim() == 'success') {
                    alert('登陆成功');
                    $('#huanying').innerHTML = '欢迎回来！'
                    $('#huanying').style.color = 'green'
                    $('#yinceng2').style.display = 'none'
                    zhezhao.style.display = 'none'

                    // 登陆成功给七天 cookie 
                    setCookie("username", $('#tt').value, 7)

                } else {
                    alert('登陆失败');
                    $('#huanying').innerHTML = '密码错误';
                    $('#huanying').style.color = 'red'
                }
            }
        })
    }
</script>

<!-- 调出登录，注册页面 -->
<script>
    // 注册的 js  （显示和隐藏）
    let yuanqiu = document.querySelector('#guanbizhuce')
    let zhuce = document.querySelector('#zhuce')
    let nb = document.querySelector('.denglu')
    let zhu = document.querySelector('.zhuce')
    let nbtz = document.querySelector('#denglu')
    let zhifubao = document.querySelector('#zhifubao')
    let zhezhao = document.querySelector('#zhezhaoceng')
    let gouwu = document.querySelector('#shopping')

    zhuce.onclick = function () {
        nb.style.display = 'block'
        zhezhao.style.display = 'block'

    }
    yuanqiu.onclick = function () {
        nb.style.display = 'none'
        zhezhao.style.display = 'none'

    }
    zhezhao.onclick = function () {
        zhezhao.style.display = 'none'
        yinceng.style.display = 'none'
        yinceng2.style.display = 'none'
    }
    // 登录的 js  （显示和隐藏）
    nbtz.onclick = function () {
        zhezhao.style.display = 'block'
        zhu.style.display = 'block'
    }
    zhifubao.onclick = function () {
        zhezhao.style.display = 'none'
        zhu.style.display = 'none'
    }

    gouwu.onclick = function () {
        location.href = 'shoppings.html'
    }
</script>